<template>
  <div>
    <h2>公司简介</h2>
    <div class="main-divider"></div>
    <div class="intro-block">
      <img class="intro-img" src="@/assets/image/99.jpg" alt="公司大楼" />
      <div class="intro-text">
        <p>
          公司始建于2008年，致力于高端装备制造及相关配套服务，拥有现代化的生产基地和研发中心。公司注重技术创新，汇聚行业精英，持续为客户提供优质产品与服务。
        </p>
      </div>
    </div>
    <div class="env-block">
      <img class="env-img" src="@/assets/image/1.jpg" alt="办公环境" />
      <img class="env-img" src="@/assets/image/2.jpg" alt="生产车间" />
      <img class="env-img" src="@/assets/image/3.jpg" alt="设备展示" />
      <img class="env-img" src="@/assets/image/4.jpg" alt="团队风采" />
    </div>
    <div class="desc-block">
      <p>
        公司业务涵盖高端装备制造、自动化生产线、智能控制系统等领域，产品广泛应用于海洋工程、能源、交通等行业。公司坚持以客户为中心，持续创新，追求卓越。
      </p>
    </div>
    <div class="island-block">
      <img class="island-img" src="@/views/home/img/1.jpg" alt="海岛风光1" />
      <img class="island-img" src="@/views/home/img/2.jpg" alt="海岛风光2" />
    </div>
    <div class="mission-block">
      <div class="mission-item">
        <strong>公司使命：</strong> 成为中国工程装备行业领先企业
      </div>
      <div class="mission-item">
        <strong>公司愿景：</strong> 打造具有国际影响力的工程装备平台
      </div>
      <div class="mission-item">
        <strong>公司价值观：</strong> 诚信为本，创新驱动，合作共赢
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CompanyIntro'
}
</script>

<style scoped>
h2 {
    color: #1b4e54;
    margin-bottom: 0;
    font-size: 24px;
    font-weight: bold;
    border-left: 4px solid #1b4e54;
    padding-left: 12px;
    letter-spacing: 1px;
  }
.company-container {
  padding: 18px 12px 32px 12px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.section-title {
  color: #1b4e54;
  font-size: 24px;
  font-weight: bold;
  border-left: 4px solid #1b4e54;
  padding-left: 12px;
  margin-bottom: 0;
  letter-spacing: 1px;
}
.main-divider {
  height: 2px;
  background: #e5e5e5;
  margin: 14px 0 28px 0;
  border: none;
}
.intro-block {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}
.intro-img {
  width: 160px;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
}
.intro-text {
  flex: 1;
  font-size: 15px;
  color: #444;
  line-height: 1.8;
}
.env-block {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.env-img {
  width: 90px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}
.desc-block {
  font-size: 15px;
  color: #444;
  margin-bottom: 18px;
}
.island-block {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.island-img {
  width: 120px;
  height: 70px;
  object-fit: cover;
  border-radius: 4px;
}
.mission-block {
  margin-bottom: 18px;
  font-size: 15px;
  color: #333;
}
.mission-item {
  margin-bottom: 6px;
}
.job-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.job-item {
  padding-bottom: 20px;
  border-bottom: 1.5px solid #e5e5e5;
}
.job-item-last {
  border-bottom: none;
}
.job-title {
  font-weight: bold;
  font-size: 17px;
  margin-bottom: 7px;
  color: #222;
}
.job-info {
  color: #444;
  font-size: 15px;
  margin-bottom: 3px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  h2 {
    font-size: 20px;
    padding-left: 10px;
  }
  
  .main-divider {
    margin: 12px 0 20px 0;
  }
  
  .intro-block {
    flex-direction: column;
    gap: 15px;
  }
  
  .intro-img {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto;
    display: block;
  }
  
  .intro-text {
    font-size: 14px;
  }
  
  .env-block {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .env-img {
    width: calc(50% - 4px);
    height: 50px;
  }
  
  .desc-block {
    font-size: 14px;
  }
  
  .island-block {
    flex-direction: column;
    gap: 10px;
  }
  
  .island-img {
    width: 100%;
    height: 60px;
  }
  
  .mission-block {
    font-size: 14px;
  }
  
  .mission-item {
    margin-bottom: 8px;
  }
}

@media (max-width: 480px) {
  h2 {
    font-size: 18px;
    padding-left: 8px;
  }
  
  .main-divider {
    margin: 10px 0 15px 0;
  }
  
  .intro-block {
    gap: 12px;
  }
  
  .intro-img {
    max-width: 150px;
  }
  
  .intro-text {
    font-size: 13px;
  }
  
  .env-img {
    width: calc(50% - 4px);
    height: 40px;
  }
  
  .desc-block {
    font-size: 13px;
  }
  
  .island-img {
    height: 50px;
  }
  
  .mission-block {
    font-size: 13px;
  }
}
</style> 